<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui.css" type="text/css"/>
    <link rel="stylesheet" href="css/friend-css.css" type="text/css"/>
	<link rel="stylesheet" href="plugins/icon/iconfont.css">
    <title>朋友</title>
</head>
<body>

<header class="aui-bar aui-bar-nav">
    <div class="aui-title">朋友</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined" id="btn4">
        <span class="aui-iconfont aui-icon-plus"></span>
    </a>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-my"></span>
    </a>
</header>

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-row aui-row-padded">
                    <div class="aui-col-xs-4" id="tab1">
                        <div>
                            <span></span>
                            <div class="aui-dot">
                            </div>
                        </div>
                        <div>生活号</div>
                        <div>出行途中的美齿小技巧</div>
                    </div>
                    <div class="aui-col-xs-4" id="tab2">
                        <div><span></span></div>
                        <div>小程序</div>
                        <div>发现更多服务</div>
                    </div>
                    <div class="aui-col-xs-4" id="tab3">
                        <div><span></span></div>
                        <div>生活圈</div>
                        <div>和朋友分享生活</div>
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item" id="btn1">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <span class="bc1"><img src="img/friend-img/py-03.jpg" /></span>
                    <div class="aui-dot"></div>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">服务提醒（含支付助手）</div>
                        <div class="aui-list-item-right">11:07</div>
                    </div>
                    <div class="aui-list-item-text">
                        又有好友收到了你的绿色能量
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item bb" id="btn2">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <span class="bc2"></span>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">快乐的哒</div>
                        <div class="aui-list-item-right">08:46</div>
                    </div>
                    <div class="aui-list-item-text">
                        [蚂蚁庄园]又有小鸡来吃饲料
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item" id="btn3">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <span class="bc3"><img src="img/friend-img/py-04.jpg"></span>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">手机充值</div>
                        <div class="aui-list-item-right">星期天</div>
                    </div>
                    <div class="aui-list-item-text">
                        愚你同乐，抽奖最高可得188元！
                    </div>
                </div>
            </div>
        </li>
		
    </ul>
</div>

<section class="aui-grid">
    <div class="aui-row">
        <div class="aui-col-xs-3">
            <a href="index.html" style="color:#2d2b2b;"><i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-grid-label">首页</div></a>
        </div>
        <div class="aui-col-xs-3">
            <i class="iconfont" style="line-height: 0.6rem;">&#xe606;</i>
            <div class="aui-grid-label">理财</div>
        </div>
        <div class="aui-col-xs-3">
            <a href="myWordMouth.html" style="color:#2d2b2b ;"><i class="iconfont" style="line-height: 0.6rem;">&#xe600;</i>
            <div class="aui-grid-label">口碑</div></a>
        </div>
        <div class="aui-col-xs-3">
            <a href="friend.html">
        	<i class="iconfont iconicon-friends-copy1" style="line-height: 0.6rem;" >&#xe603;</i>
            <div class="aui-grid-label">朋友</div></a>
        </div>
        <div class="aui-col-xs-3">
            <a href="my2.html" style="color:#2d2b2b ;"><i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-grid-label">我的</div></a>
        </div>
    </div>
</section>

<div class="fixed box1">
    <div class="fixed-bg-color">
        <div class="delete1">删除该聊天</div>
    </div>
</div>

<div class="fixed box2">
    <div class="fixed-bg-color">
        <div class="up1">收起</div>
        <div class="pick1">取消关注</div>
        <div class="delete2">删除该聊天</div>
    </div>
</div>

<div class="fixed box3">
    <div class="fixed-bg-color">
        <div>取消关注[花呗]后，将不再收到其下发的消息</div>
        <div class="text">
            <span class="remove1">取消</span><span class="remove2">不再关注</span>
        </div>
    </div>
</div>

<div class="fixed box4">
    <div class="fixed-bg-color">
        <div class="up2">收起</div>
        <div class="pick2">取消关注</div>
        <div class="delete3">删除该聊天</div>
    </div>
</div>

<div class="fixed box5">
    <div class="fixed-bg-color">
        <div>取消关注[手机充值]后，将不再收到其下发的消息</div>
        <div class="text">
            <span class="remove3">取消</span><span class="remove4">不再关注</span>
        </div>
    </div>
</div>

<div class="fixed box6">
    <div class="fixed-bc">
        <div><img src="img/friend-img/fqql.png"> <span>发起群聊</span></div>
        <div><img src="img/friend-img/tjpy.png"> <span>添加朋友</span></div>
        <div><img src="img/friend-img/sys.png"> <span>扫一扫</span></div>
        <div><img src="img/friend-img/sq.png"> <span>收钱</span></div>
        <div><img src="img/friend-img/zs.png"> <span>智能助手</span></div>
        <div class="san"></div>
    </div>
</div>


<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script>
    $(function () {
        var TimeFn = null;
       $("#btn1").click(function () {
           $(".box1").show();
       });
        $(".delete1").click(function () {
            $("#btn1").hide();
        });
        $(".box1").click(function () {
            $(".box1").hide();
        });
        $(".delete2").click(function () {
            $("#btn2").hide();
        });
        $(".box2").click(function () {
            $(".box2").hide();
        });
        $(".up1").click(function () {
            $(".box2").hide();
            $("#btn2").slideUp();
        });
        $(".pick1").click(function () {
            $(".box3").show();
        });
        $(".box3").click(function () {
            $(".box3").hide();
        });
        $(".remove1").click(function () {
            $(".box3").hide();
        });
        $(".remove2").click(function () {
            $(".box3").hide();
            $("#btn2").hide();
        });
        $("#btn3").click(function () {
            $(".box4").show();
        });
        $(".delete3").click(function () {
            $("#btn3").hide();
        });
        $(".box4").click(function () {
            $(".box4").hide();
        });
        $(".up2").click(function () {
            $(".box4").hide();
            $("#btn3").slideUp();
        });
        $(".pick2").click(function () {
            $(".box5").show();
        });
        $(".box5").click(function () {
            $(".box5").hide();
        });
        $(".remove3").click(function () {
            $(".box5").hide();
        });
        $(".remove4").click(function () {
            $(".box5").hide();
            $("#btn3").hide();
        });
        $("#btn4").click(function () {
            $(".box6").show();
        });
        $(".box6").click(function () {
            $(".box6").hide();
        });
        function box() {
            var TimeFn = null;
            // var obj = document.getElementById("btn2");
            // var box = document.getElementsByClassName("box2");
            $("#btn2").click(function (){
                // clearTimeout(TimeFn);
                TimeFn = setTimeout(function () {
                    $(".box2").show();
                },300);
            });
            $(".bb").dblclick(function () {
                clearTimeout(TimeFn);
                $(location).attr('href','chatInterface.html');
            });
        }
        box();
    });
</script>

<script>
    function testOne() {
        var obj = document.getElementById("tab1");
        obj.onclick = function () {
            window.location.href = "lifeNumber.html";
        }
    }
    testOne();

    function testTwo() {
        var obj = document.getElementById("tab2");
        obj.onclick = function () {
            window.location.href = "smallProgram.html";
        }
    }
    testTwo();

    function testThree() {
        var obj = document.getElementById("tab3");
        obj.onclick = function () {
            window.location.href = "lifeCircle.html";
        }
    }
    testThree();

</script>

</body>
</html>